<template>
  <div class="storeUserModify common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <div class="common-bot">
      <div class="modify-bot">
        <el-form :model="form" label-width="auto">
          <el-form-item required label="名称" style="width: 50%">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item required label="客户账户" style="width: 50%">
            <el-select
              v-model="form.userId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员等级是否按积分自动" style="width: 30%">
            <el-switch v-model="form.vipAuto"></el-switch>
          </el-form-item>
          <el-form-item label="会员等级是否统一" style="width: 30%">
            <el-switch v-model="form.vipShare"></el-switch>
          </el-form-item>
          <el-form-item label="客户账户是否共用" style="width: 30%">
            <el-switch v-model="form.wealthShare"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import UploadFile from "@/components/uploadFile";
import {
  provinceAndCityData,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import ManaApi from "@/api/index";
export default {
  name: "storeUserModify",
  components: { UploadFile },
  data() {
    return {
      areaSelectData: provinceAndCityData,
      userList: [],
      genderOptions: [
        {
          label: "男",
          value: "male",
        },
        {
          label: "女",
          value: "female",
        },
      ],
      vipOptions: [
        {
          label: "普通版",
          value: "0",
        },
      ],
      storeTypeOptions: [],
      form: {
        formId: 0,
        name: "",
        userId: 0,
        vipAuto: true,
        vipShare: true,
        wealthShare: true,
      },
      roleOptions: [
        {
          label: "老板",
          value: "boss",
        },
        {
          label: "员工",
          value: "employee",
        },
      ],
      loading: false,
    };
  },
  methods: {
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        await this.getUserList(query);
        this.loading = false;
      } else {
        await this.getUserList();
        this.loading = false;
      }
    },
    getUserList(query = "") {
      return new Promise((resolve, reject) => {
        ManaApi.storeUserMana
          .userList({
            limit: this.$normalMaxLimit,
            page: 0,
            keyword: query,
          })
          .then((res) => {
            this.userList = res.data;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
    uploadSuc(data) {
      this.$set(this.form, "avatar", data.url);
      console.log(data);
    },
    checkInfo() {
      if (String(this.form.name).trim() == "") {
        this.$message.error("请填写名称");
        return false;
      }
      return true;
    },
    save() {
      if (!this.checkInfo()) {
        return;
      }
      let form = JSON.parse(JSON.stringify(this.form));
      ManaApi.chain.edit(form).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.$router.go(-1);
        }
      });
    },
    getInfo() {
      ManaApi.chain
        .detail({
          targetId: this.$route.query.id,
        })
        .then((res) => {
          this.form = {
            formId: res.data.id,
            name: res.data.name,
            userId: res.data.storeUserId,
            vipAuto: res.data.vipAuto,
            vipShare: res.data.vipShare,
            wealthShare: res.data.wealthShare,
          };
        });
    },
    getConstant() {
      return new Promise((resolve, reject) => {
        ManaApi.constant
          .all({})
          .then((res) => {
            this.storeTypeOptions = res.data.StoreType;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
  },
  async mounted() {
    await this.getUserList();
    await this.getConstant();
    if (this.$route.query.type == "edit") {
      this.getInfo();
    }
  },
};
</script>
<style lang="scss" scoped>
.storeUserModify {
}
</style>